<template>
  <div class="box">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
    >
      <!-- 歌名 -->
      <el-form-item label="歌名" prop="albumName">
        <el-input v-model="ruleForm.albumName"></el-input>
      </el-form-item>
      <!-- 音乐地址 -->
      <el-form-item label="音乐地址" prop="albumName">
        <el-input v-model="ruleForm.netaddress"></el-input>
      </el-form-item>
      <!-- 歌词 -->
      <el-form-item label="歌词" prop="albumName">
        <el-input v-model="ruleForm.lyric"></el-input>
      </el-form-item>
      <!-- 歌曲图片 -->
      <el-form-item label="歌曲图片" prop="albumImg">
        <el-col :span="12">
          <img :src="Url" alt="" v-if="Url" />
        </el-col>
        <el-col :span="12">
          <input
            name="file"
            type="file"
            accept="image/png,image/gif,image/jpeg"
            @change="update"
          />
        </el-col>
      </el-form-item>

      <!-- 发布时间 -->
      <el-form-item label="发布时间" prop="createTime">
        <el-col :span="16">
          <el-date-picker
            type="date"
            placeholder="选择日期"
            v-model="ruleForm.createTime"
            style="width: 100%"
            @change="changeBirthday"
          ></el-date-picker>
        </el-col>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit" v-if="alter == 'true'"
          >立即添加</el-button
        >
        <el-button type="primary" @click="alterBtn" v-else>立即修改</el-button>
        <el-button @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      ruleForm: {
        albumImg: "",
        albumName: "",
        createTime: "",
        lyric: "",
        id: 0,
        netaddress: "",
      },
      rules: {
        albumImg: [{ required: true, message: "请选择图片", trigger: "blur" }],
        albumName: [
          { required: true, message: "请输入专辑名", trigger: "blur" },
        ],
        createTime: [
          { required: true, message: "请选择发布时间", trigger: "blur" },
        ],
      },
      Url: "",
      alter: "",
      id: 0,
      HTTPS: "http://192.168.0.26:8081",
    };
  },
  methods: {
    // 添加
    onSubmit() {
      console.log(this.ruleForm.netaddress);
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          this.processingSata();
          this.$axios
            .post("api/music/addMusic", {
              albumId: sessionStorage.getItem("albumId"),
              singerId: sessionStorage.getItem("singerId"),
              releaseTime: this.ruleForm.createTime,
              musicLyric: this.ruleForm.lyric,
              musicName: this.ruleForm.albumName,
              url: this.ruleForm.netaddress,
              imgUrl: this.ruleForm.albumImg,
            })
            .then((res) => {
              console.dir(res);
              if (res.data.msg == "操作成功") {
                alert("添加成功");
                this.$router.push({
                  name: "musicList",
                  params: { breaks: true },
                });
              } else {
                alert("添加失败！");
              }
            });
        } else {
          return false;
        }
      });
    },
    // 修改
    alterBtn() {
      console.log(this.ruleForm.createTime);
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          this.processingSata();
          this.$axios
            .post("api/album/updateAlbumById", {
              // albumName: this.ruleForm.albumName,
              // releaseTime: this.ruleForm.createTime,
              // albumImg: this.ruleForm.albumImg,
              // id: this.ruleForm.id,
            })
            .then((res) => {
              if (res.data.msg == "操作成功") {
                alert("修改成功");
                this.$router.push({
                  name: "albumList",
                  params: { breaks: true },
                });
              } else {
                alert("修改失败！");
              }
            });
        } else {
          return false;
        }
      });
    },
    // 取消
    cancel() {
      this.$router.push("/albumList");
    },
    // 获取图片路径
    update(e) {
      let file = e.target.files[0];
      // console.dir(URL.createObjectURL(file));
      this.url = URL.createObjectURL(file);
      let param = new FormData(); // 创建form对象
      param.append("file", file); // 通过append向form对象添加数据
      let config = {
        headers: { "Content-Type": "multipart/form-data" },
      };
      // 添加请求头
      axios
        .post("http://192.168.0.26:8081/file/uploadFile", param, config)
        .then((res) => {
          this.ruleForm.albumImg = res.data.data;
          this.Url = this.HTTPS + res.data.data;
          // console.dir(this.Url);
        });
    },
    // 修改发布时间触发
    changeBirthday() {
      var str = this.ruleForm.createTime.toISOString();
      console.log(str);
      var a = String(Number(str.slice(8, 9)) + 1);
      var b = String(Number(str.slice(9, 10)) + 1);
      if (Number(str.slice(9, 10)) + 1 == 10) {
        b = 0;
        this.ruleForm.createTime = str.slice(0, 8) + a + b;
      } else {
        this.ruleForm.createTime = str.slice(0, 9) + b;
      }
    },
    processingSata() {
      console.dir(this.ruleForm);
    },
    // 获取修改专辑数据
    getData() {
      var obj = JSON.parse(this.$route.query.obj);
      for (const key in obj) {
        this.ruleForm[key] = obj[key];
      }
      this.ruleForm.albumImg = obj.albumImg.slice(24, obj.albumImg.length);
      this.Url = obj.albumImg;
      console.dir(obj);
    },
  },
  mounted() {
    var alter = this.$route.query.alter;
    this.alter = alter;
    if (alter == undefined) {
      this.getData();
    }
    this.id = sessionStorage.getItem("singerId");
  },
};
</script>
<style scoped>
.box {
  width: 500px;
  margin: 20px auto 0;
}
img {
  width: 50px;
  height: 50px;
}
</style>